import { useEffect, useRef } from "react";
import { personalInfo, projects, contactInfo } from "@/data/resumeData";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import TimelineItem from "@/components/TimelineItem";

export default function Home() {
  const timelineRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("animate-fadeIn");
          }
        });
      },
      { threshold: 0.1 }
    );

    if (timelineRef.current) {
      const items = timelineRef.current.querySelectorAll(".timeline-item");
      items.forEach((item) => observer.observe(item));
    }

    return () => observer.disconnect();
  }, []);

  return (
    <div className="bg-gray-50 min-h-screen">
      <Navbar />
      
      <main className="container mx-auto px-4 pt-24 pb-12">
        {/* About Section */}
        <section id="about" className="mb-20">
          <div className="bg-white p-8 rounded-lg shadow-sm">
            <h1 className="text-4xl font-bold text-[#2B3A67] mb-2">{personalInfo.name}</h1>
            <h2 className="text-2xl text-gray-600 mb-4">{personalInfo.title}</h2>
            <p className="text-gray-700 mb-6">{personalInfo.bio}</p>
            
            <div className="flex flex-wrap gap-2">
              {personalInfo.skills.map((skill) => (
                <span key={skill} className="px-4 py-2 bg-[#2B3A67] text-white rounded-full">
                  {skill}
                </span>
              ))}
            </div>
          </div>
        </section>

        {/* Projects Section */}
        <section id="projects" className="mb-20">
          <h2 className="text-3xl font-bold text-[#2B3A67] mb-8">项目经历</h2>
          <div ref={timelineRef}>
            {projects.map((project, index) => (
              <div key={project.id} className="timeline-item opacity-0">
                <TimelineItem 
                  project={project} 
                  isLast={index === projects.length - 1} 
                />
              </div>
            ))}
          </div>
        </section>

        {/* Contact Section */}
        <section id="contact" className="mb-12">
          <div className="bg-white p-8 rounded-lg shadow-sm">
            <h2 className="text-3xl font-bold text-[#2B3A67] mb-6">联系方式</h2>
            <div className="space-y-4">
              <p className="flex items-center">
                <i className="fa-solid fa-envelope mr-3 text-gray-600"></i>
                <span>{contactInfo.email}</span>
              </p>
              <p className="flex items-center">
                <i className="fa-solid fa-phone mr-3 text-gray-600"></i>
                <span>{contactInfo.phone}</span>
              </p>
            </div>
          </div>
        </section>
      </main>

      <Footer />
      
      <style jsx global>{`
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(20px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .animate-fadeIn {
          animation: fadeIn 0.6s ease-out forwards;
        }
      `}</style>
    </div>
  );
}